import React, {useEffect, useState} from 'react';
import {HeaderRightStyle} from "./style";
import Icon_global from "@/assets/svg/icon_global";
import Icon_menu from "@/assets/svg/icon_menu";
import IconAvatar from "@/assets/svg/icon_avatar";

const HeaderRight = () => {

    const [showPanel, setShowPanel] = useState(false)

    useEffect(() => {
        const windowHandelClick = (evt) => {
            setShowPanel(false)
        }
        window.addEventListener("click", windowHandelClick, true);
        return () => {
            window.removeEventListener("click", windowHandelClick, true);
        }
    })

    function profileClickHandel() {
        setShowPanel(true)
    }

    return (
        <HeaderRightStyle>
            <div className='btn-container'>
                <span className='btn'>登录</span>
                <span className='btn'>注册</span>
                <span className='btn'>
                    <Icon_global/>
                </span>
            </div>
            <div className='profile' onClick={profileClickHandel}>
                <Icon_menu/>
                <IconAvatar/>
                { showPanel &&(
                    <div className='panel'>
                        <div className='top'>
                            <div className='item register'>注册</div>
                            <div className='item login'>登录</div>
                        </div>
                        <div className='bottom'>
                            <div className='item'>出租房源</div>
                            <div className='item'>开展体验</div>
                            <div className='item'>帮助</div>
                        </div>
                    </div>
                )}
            </div>
        </HeaderRightStyle>
    );
};

export default HeaderRight;